<template>
  <div class="right-bottom">
    <div class="right-bottom_card">
      <div class="right-bottom_card_body">
        <div class="right-bottom_card_body_box">
          <div class="right-bottom_card_body_img rotate"></div>
        </div>
        <p class="right-bottom_card_body_title">风机设备2</p>
        <div class="right-bottom_card_body_status">当前状态：</div>
      </div>
      <div class="right-bottom_card_lable">
        <span class="right-bottom_card-online"></span>
        <div class="ml-10">设备运行中</div>
      </div>
    </div>
    <div class="right-bottom_card">
      <div class="right-bottom_card_body">
        <div class="right-bottom_card_body_box">
          <div class="right-bottom_card_body_img"></div>
        </div>
        <p class="right-bottom_card_body_title">风机设备2</p>
        <div class="right-bottom_card_body_status">当前状态：</div>
      </div>
      <div class="right-bottom_card_lable" style="background: rgba(255, 255, 255, 0.3);">
        <span class="right-bottom_card_offline"></span>
        <div class="ml-10" style="color:#fff">设备已停止</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.right-bottom{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  .right-bottom_card{
    width: 46%;
    height: 300px;
    display: flex;
    background-color: rgba(35, 149, 255, .1);
    flex-direction: column;
    justify-content: space-between;
    .right-bottom_card_body{
      height: calc(100% - 70px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .right-bottom_card_body_box{
        margin-top: 10px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        padding: 15px;
        align-items: center;
        display: flex;
        justify-content: center;
        background-color: RGBA(16, 58, 123, .3);
        border: 3px solid #2FA8F3;
        .right-bottom_card_body_img{
          width: 100px;
          height: 100px;
          background: url('~@/assets/images/antiknock/right-bottom-card_img.png') center no-repeat;
          border-radius: 50%;
        }
        .rotate{
          -webkit-animation: rotation 3s linear infinite;
          animation: rotation 3s linear infinite;
        }
        @keyframes rotation {
          0% {
            -webkit-transform: rotate(0deg);
          }
          50% {
            -webkit-transform: rotate(180deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
          }
        }
      }
      .right-bottom_card_body_title{
        color: #fff;
      }
      .right-bottom_card_body_status{
        color: #A6A9B6;

      }
    }
    .right-bottom_card_lable{
      height: 70px;
      background-color: rgba(61, 214, 68, .4);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      .right-bottom_card-online {
        /*宽高相等*/
        height: 8px;
        width: 8px;
        /*设置圆角边框，尺寸为宽高的一半，就是正圆*/
        border-radius: 50%;
        /*背景色*/
        background-color: #4dbf4f;
        /*设置block才能显示出来*/
        display: inline-block;
        border: 3px solid #fff;
      }
      .right-bottom_card_offline{
        /*宽高相等*/
        height: 8px;
        width: 8px;
        /*设置圆角边框，尺寸为宽高的一半，就是正圆*/
        border-radius: 50%;
        /*背景色*/
        // background-color: #bababa;
        background: #636363;
        /*设置block才能显示出来*/
        display: inline-block;
        border:3px solid #fff;
      }
      div{
        text-align: center;
        color: #3DD644;
      }
    }
  }

}
</style>
